<template>
  <view class="w100 bg-gray flex-sub flex flex-col">
    <!-- <u-navbar
      v-if="isSub"
      :safeAreaInsetTop="true"
      title="订单列表"
      :fixed="true"
      :autoBack="true"
      left-text="返回"
    >
    </u-navbar> -->
    <view class="">
      <u-picker
        keyName="label"
        :show="showPicker"
        :columns="columns"
        closeOnClickOverlay
        @close="showPicker = false"
        @cancel="showPicker = false"
        @confirm="handlePicker"
      ></u-picker>
    </view>

    <view
      :style="{ 'margin-top': isSub ? '30px' : '0' }"
      class="w100 bg-gray flex-sub padding-lr padding-top flex-center flex-direction"
    >
      <!-- <u-search
        class="bg-white flex-0 w100 padding"
        shape="square"
        placeholder="输入评论"
        v-model="keyword"
        @search="queryList(1)"
      ></u-search> -->
      <view style="" class="flex bd-b w100 bg-white w100 padding">
        <view
          :class="{ 'text-grey': !replyState, 'text-black': !!replyState }"
          class="text-df flex-center flex-sub bd-r-1"
          @click="reply"
          >{{ replyState || "回复状态" }}</view
        >
        <view
          :class="{ 'text-grey': !hideState, 'text-black': !!hideState }"
          class="text-df flex-center flex-sub"
          @click="hide"
          >{{ hideState || "隐藏状态" }}
        </view>
      </view>
      <view
        style="margin-bottom: -30px"
        class="bg-white w100 padding-lr text-sm"
      >
        <u-cell :border="false">
          <view class="text-df text-bold" slot="title">评论列表</view>
          <view class="text-grey text-sm" slot="value">总计 {{ total }}</view>
        </u-cell>
        <Detail :showDetail.sync="showDetail" :info="this.currentInfo"></Detail>
      </view>
      <z-paging
        class="flex-sub padding-lr bg-white"
        ref="paging"
        :default-page-size="limit"
        v-model="commentsList"
        :refresher-enabled="true"
        :auto-clean-list-when-reload="false"
        :auto-scroll-to-top-when-reload="true"
        :show-default-loading-more-text="true"
        loading-more-no-more-text="没有更多了"
        :fixed="false"
        :pagingStyle="{
          height: `calc( 100vh - ${statusBarHeight + tabHeight}px )`,
        }"
        @query="queryList"
      >
        <view
          class="rcl-notice__item"
          v-for="(item, index) in commentsList"
          :key="index"
          @click="accountClick(index)"
        >
          <u-cell-group>
            <u-cell :border="false">
              <view class="flex text-cut" slot="title">
                <view
                  style="width: 100px"
                  class="flex-sub text-cut margin-left-xs text-bold"
                >
                  {{ item.aweme_name }}
                </view>
                <view class="flex justify-between">
                  <u-tag
                    class="flex-sub"
                    :text="item.stick ? '已置顶' : '未置顶'"
                    size="mini"
                    plain
                  />
                  <u-tag
                    class="flex-sub margin-lr-sm"
                    :text="item.is_hide==='1' ? '已隐藏' : '未隐藏'"
                    size="mini"
                    type="warning"
                    plain
                  />
                  <u-tag
                    class="flex-sub"
                    size="mini"
                    :text="
                      item.reply_status === 'NO_REPLY' ? '未回复' : '已回复'
                    "
                    type="error"
                    plain
                  />
                </view>
              </view>
              <view
                class="text-sm flex-col margin-top justify-between"
                slot="label"
              >
                <view class="flex">
                  <view class="flex-sub">计划名 :</view>
                  <view class="flex-treble">{{ item.plan_name }}</view>
                </view>
                <view class="flex margin-top-sm">
                  <view class="flex-sub">户名 :</view>
                  <view class="flex-treble">{{ item.advertiser_name }}</view>
                </view>
              </view>
            </u-cell>
            <u-cell
              style="margin-top: -10px"
              :border="false"
              value="查看详情"
              :isLink="true"
              :disabled="true"
              arrow-direction="right"
            >
              <view
                style="display: block"
                class="flex text-brown text-df text-cut w200"
                slot="title"
              >
                {{ item.text }}
              </view>
            </u-cell>
          </u-cell-group>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script>
import Detail from "./detail.vue";
import dayjs from "dayjs";
import { commentsList } from "@/api";
import { mapGetters } from "vuex";
export default {
  components: { Detail },
  props: {
    isSub: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["isAdmin", "curProStatus"]),
  },
  data() {
    return {
      hideState: undefined,
      replyState: undefined,
      columns: [],
      showPicker: false,
      showDetail: false,
      currentInfo: {},
      total: 0,
      page: 1,
      limit: 10,
      keyword: "",
      statusBarHeight: 10,
      tabHeight: 0,
      commentsList: [],
      params: {},
    };
  },
  onLoad() {},
  methods: {
    hide() {
      this.columns = [
        [
          { label: "已隐藏", value: "1" },
          { label: "未隐藏", value: "0" },
          { label: "空", value: undefined },
        ],
      ];
      this.key = "is_hide";
      this.$nextTick(() => (this.showPicker = true));
    },
    reply() {
      this.columns = [
        [
          { label: "已回复", value: 1 },
          { label: "未回复", value: 2 },
          { label: "空", value: undefined },
        ],
      ];
      this.key = "reply_status";
      this.$nextTick(() => (this.showPicker = true));
    },
    handlePicker(val) {
      if (this.key === "is_hide") {
        this.hideState = val.value[0].value && val.value[0].label;
      } else {
        this.replyState = val.value[0].value && val.value[0].label;
      }
      this.params[this.key] = val.value[0].value;
      this.showPicker = false;
      this.queryList(1);
    },
    accountClick(idx) {
      this.currentInfo = this.commentsList[idx];
      this.showDetail = true;
    },

    queryList(pageNo, pageSize) {
      this.page = pageNo;
      this.handleGetList();
    },

    handleGetList() {
      commentsList({
        channel: this.isAdmin ? 0 : this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3,
        page: this.page,
        page_size: this.limit,
        ...this.params,
        // keyword: this.keyword,
      }).then(({ data }) => {
        this.$refs.paging.complete(data.List);
        this.total = data.Total;
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
}
</style>
